<template>
	<view class="actives">
		<view class="uni-form-item uni-column">
			<view class="title">卡号：</view>
			<input class="uni-input" v-model="cardnum" placeholder="请填写激活码"
				placeholder-style="color:#939393;font-size:28rpx" />
		</view>
		<view class="uni-form-item uni-column">
			<view class="title">密码：</view>
			<input class="uni-input" v-model="password" :password="true" placeholder="请填写密码"
				placeholder-style="color:#939393;font-size:28rpx" />
		</view>
		<button type="default" class="active_btn" @click="confirmActive" :class="{disabled : !cardnum || !password}"
			:disabled="!cardnum || !password">确认激活</button>
	</view>
</template>

<script>
	import {
		vips
	} from "@/api/my/my.js";
	export default {
		data() {
			return {
				cardnum: "",
				password: ""
			}
		},
		methods: {
			async confirmActive() {
				uni.showLoading({
					title: '会员激活中..'
				});
				const res = await vips('activateMembers', {
					card_number: this.cardnum,
					password: this.password
				});
				if (res.code == 200) {
					uni.hideLoading();
					uni.navigateBack();
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "../my.scss";

	.actives {
		padding: 60rpx 20rpx;
		color: #383838;
		font-size: 28rpx;

		.uni-form-item {
			line-height: 100rpx;
			@include flexLayout(center, flex-start);
			border-bottom: 2rpx solid #eff2f5;
			padding-top: 10rpx;
		}

		.active_btn {
			width: 80%;
			height: 84rpx;
			line-height: 84rpx;
			background: linear-gradient(360deg, #EE4629 0%, #EE653A 100%);
			box-shadow: 0px 20rpx 36rpx 0px rgba(238, 73, 43, 0.25);
			border-radius: 42rpx;
			margin: 120rpx 10%;
			color: #FFFFFF;
			font-size: 36rpx;
			font-weight: 500;
		}
		.disabled {
			background: #c3b4b4;
		}
	}
</style>
